<template>
	<view class="bi-call-phone" :class="[{'is-disabled': disabled}, 'bi-call-phone--' + type]">
		<view class="bi-call-phone__handle" @click="handleClick">
			<slot name="handle" :disabled="disabled">
				<view class="bi-call-phone__handle-btn">
					<ui-icon name="phone-fill" size="18px"></ui-icon>
				</view>
			</slot>
		</view>
		<ui-popup
			v-model="showMorePhone"
			:safe-area="false"
		>
			<view class="bi-call-phone__main">
				<view class="bi-call-phone__head">
					<view class="bi-call-phone__head-right">
						<view class="bi-call-phone__title">选择号码拨打</view>
					</view>
					<view class="bi-call-phone__head-right">
						<view class="bi-call-phone__head-close" @click="handleCloseClick"></view>
					</view>
				</view>
				<view class="bi-call-phone__body">
					<view class="bi-call-phone__list">
						<view 
							class="bi-call-phone__item"
							v-for="(item, index) in phones"
							:key="index"
						>
							<view class="bi-call-phone__number">
								{{ item }}
							</view>
							<view class="bi-call-phone__call" @click="handleItemClick(item)">
								<ui-icon name="phone-fill" size="18px"></ui-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</ui-popup>
	</view>
</template>

<script>
	import { error } from '@/utils/message.js'
	
	export default {
		name: 'BiCallPhone',
		props: {
			value: {
				type: [String, Number]
			},
			type: {
				type: String,
				default: 'round',
				validator (value) {
					return ['round', 'default'].includes(value)
				}
			}
		},
		data () {
			return {
				showMorePhone: false
			}
		},
		computed: {
			phones () {
				if (!this.value) {
					return []
				}
				if (typeof this.value === 'string') {
					return this.value.split(',')
				}
				return [this.value]
			},
			disabled () {
				return !this.phones.length
			}
		},
		methods: {
			handleClick () {
				if (this.disabled) {
					return
				}
				if (this.phones.length > 1) {
					this.showMorePhone = true
				} else {
					uni.makePhoneCall({
						phoneNumber: this.phones[0],
						fail (err) {
							error(err)
						}
					})
				}
			},
			handleItemClick (phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
					fail (err) {
						error(err)
					}
				})
			},
			handleCloseClick () {
				this.showMorePhone = false
			}
		}
	}
</script>

<style lang="less">
.bi-call-phone--round{
	display: inline-block;
	vertical-align: top;
	.bi-call-phone__handle-btn{
		width: 24px;
		height: 24px;
		text-align: center;
		line-height: 24px;
		border-radius: 50%;
		background-color: #6dc873;
		color: #fff;
		display: inline-block;
		vertical-align: top;
	}
	&.is-disabled {
		.bi-call-phone__handle-btn{
			cursor: not-allowed;
			background-color: #dddde4;
		}
	}
}
.bi-call-phone--default{
	display: block;
	vertical-align: top;
	.bi-call-phone__handle-btn{
		height: 24px;
		text-align: center;
		line-height: 24px;
		border-radius: 4px;
		background-color: #6dc873;
		color: #fff;
	}
	&.is-disabled {
		.bi-call-phone__handle-btn{
			cursor: not-allowed;
			background-color: #dddde4;
		}
	}
}
.bi-call-phone__main{
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	background-color: #fff;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}
.bi-call-phone__head {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	line-height: 32px;
	padding: 16px 20px 8px;
}
.bi-call-phone__list {
	max-height: 360px;
	overflow-y: auto;
	padding-bottom: 12px;
}
.bi-call-phone__item{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 6px 20px;
}
.bi-call-phone__call{
	width: 24px;
	height: 24px;
	text-align: center;
	line-height: 24px;
	border-radius: 50%;
	background-color: #6dc873;
	color: #fff;
	display: inline-block;
	vertical-align: top;
}
.bi-call-phone__head-close{
	width: 18px;
	height: 18px;
	position: relative;
	transform: rotate(45deg);
	margin-right: -3px;
	&:after,&:before {
		content: '';
		position: absolute;
		background-color: #999;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
	&:after{
		width: 15px;
		height: 1px;
	}
	&:before {
		width: 1px;
		height: 15px;
	}
}
</style>